<div id="app">
    <nz-progress *ngIf="loadPercent < 100" nzStrokeWidth="5" [nzShowInfo]="false" nzStatus="active" [nzPercent]="loadPercent"></nz-progress>
    <nz-layout class="layout">
        <nz-header class="header">
            <div class="wrap">
                <div class="left">
                    <h1 [routerLink]="['/home']">Music</h1>
                    <ul nz-menu nzTheme="dark" nzMode="horizontal">
                        <li nz-menu-item *ngFor="let item of menu" [nzSelected]="routeTitle === item.label"
                            [routerLink]="item.path">{{item.label}}</li>
                    </ul>
                </div>
                <div class="right">
                    <app-wy-search (onSearch)="onSearch($event)" [searchResult]="searchResult"></app-wy-search>

                    <div class="member">
                        <div class="no-login" *ngIf="!user else logined">
                            <ul nz-menu nzTheme="dark" nzMode="horizontal">
                                <li nz-submenu>
                                    <div title>
                                        <span>登录</span>
                                        <i nz-icon type="down" nzTheme="outline"></i>
                                    </div>
                                    <ul>
                                        <li nz-menu-item (click)="openModalByMenu('loginByPhone')">
                                            <i nz-icon type="mobile" nzTheme="outline"></i>
                                            手机登陆
                                        </li>
                                        <li nz-menu-item (click)="openModalByMenu('register')">
                                            <i nz-icon type="user-add" nzTheme="outline"></i>
                                            注册
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <ng-template #logined>
                            <div class="login">
                                <ul nz-menu nzMode="horizontal" nzTheme="dark">
                                    <li nz-submenu>
                                        <div title>
                                            <nz-avatar nzIcon="user" [nzSrc]="user.profile.avatarUrl"
                                                [routerLink]="['/member',user.profile.userId]"></nz-avatar>
                                            <i nz-icon type="down" nzTheme="outline"></i>
                                        </div>
                                        <ul>
                                            <li nz-menu-item [routerLink]="['/member', user.profile.userId]">
                                                <i nz-icon nzType="user" nzTheme="outline"></i>我的主页
                                            </li>
                                            <li nz-menu-item (click)="onLogout()">
                                                <i nz-icon nzType="close-circle" nzTheme="outline"></i>退出
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </ng-template>
                    </div>
                </div>
            </div>
        </nz-header>
        <nz-content class="content">
            <router-outlet></router-outlet>
        </nz-content>
        <nz-footer class="footer">
            Ant Design ©2019 Implement By Angular
        </nz-footer>
    </nz-layout>
</div>

<app-wy-player></app-wy-player>

<app-wy-layer-modal [visible]="visible" [showSpin]="showSpin" [currentModalType]="currentModalType"
    (onLoadMySheets)="onLoadMySheets()">
    <app-wy-layer-login name="login" [visible]="visible" [wyRememberLogin]="wyRememberLogin" (onLogin)="onLogin($event)"
        (onChangeModalType)="onChangeModalType($event)"></app-wy-layer-login>
    <app-wy-layer-like name="like" [visible]="visible" [likeId]="likeId" [mySheets]="mySheets"
        (onCreateSheet)="onCreateSheet($event)" (onLikeSong)="onLikeSong($event)"></app-wy-layer-like>
    <app-wy-layer-share name="share" [visible]="visible" [shareInfo]="shareInfo" (onCancel)="closeModal()"
        (onShare)="onShare($event)"></app-wy-layer-share>
    <app-wy-layer-register name="register" [visible]="visible" (onChangeModalType)="onChangeModalType($event)"
        (onRegister)="onRegister($event)"></app-wy-layer-register>
    <app-wy-layer-default (onChangeModalType)="onChangeModalType($event)"></app-wy-layer-default>
</app-wy-layer-modal>

<nz-back-top [nzTemplate]="tpl">
    <ng-template #tpl>
      <div class="ant-back-top-inner">
        <button nz-button nzType="primary" nzSize="large">
          <i nz-icon nzType="to-top" nzTheme="outline"></i>
        </button>
      </div>
    </ng-template>
  </nz-back-top>